import React, { useEffect, useState, useRef } from 'react'
import { List, Avatar, Image, message, Button, Typography, Modal, Tag, Input, Drawer, Table, Space, Tooltip, Row, Col } from 'antd';
import { QuestionCircleTwoTone } from '@ant-design/icons';
import axios from 'axios';
import { useNavigate } from 'react-router-dom'
import MySpan from '../../../components/MySpan'
import moment from 'moment'
const { Text } = Typography
export default function Index() {
    const loginOrg = JSON.parse(localStorage.getItem("loginOrg"));
    const [listData, setListData] = useState([]);
    const [checkData, setCheckData] = useState([]);
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [drawerVisible2, setDrawerVisible2] = useState(false);
    const [writeModal, setWriteModal] = useState(false)
    const [responderexpressinfo, setResponderexpressinfo] = useState();  //保存 responderexpressinfo信息
    const myExpressId = useRef();
    useEffect(async () => {
        const resp = await axios.get("http://localhost:8080/allDonation")
        setListData(resp.data.data)
        console.log(resp);
        return () => {
        };
    }, []);

    const showDetailGoods = (record) => {
        Modal.info({
            title: '详细信息',
            content: <Row>
                {record.dodetail.map((item, index) => {
                    return <Tag color="green">{item.goodsname}X{item.goodsnum}</Tag>
                })}
            </Row>,

        });
    }
    const columns = [
        {
            title: '用户昵称',
            key: 'nickname',
            render: (text, record) => (
                <Text type="secondary">{record.nickname}</Text>
            ),
        },
        {
            title: '机构名称',
            key: 'orgname',
            render: (text, record) => (
                <Text type="secondary">{record.orgname}</Text>
            ),
        },
        {
            title: <Tooltip title="点击查看详情">捐赠物品 <QuestionCircleTwoTone /></Tooltip>,
            ellipsis: true,
            key: 'address',
            render: (text, record) => (
                <Space onClick={() => { showDetailGoods(record) }}>
                    {record.dodetail.map((item, index) => {
                        return <Tag color="green">{item.goodsname}X{item.goodsnum}</Tag>
                    })}
                </Space>
            ),
        },


        {
            title: "发放积分",
            key: 'point',
            render: (text, record) => (
                <Text type="secondary">{record.point}</Text>
            ),
        },
        {
            title: '物流编号',
            key: 'dostate',
            render: (text, record) => (
                <MySpan title={record.doexpress == "" || record.doexpress == null ? "等待用户上传物流编号" : record.doexpress} />
            ),
        },
        {
            title: '日期',
            key: 'createtime', ellipsis: true,
            sorter: (a, b) => a.createtime - b.createtime,
            render: (text, record) => (
                <MySpan title={moment(Number(record.createtime)).format('YYYY-MM-DD HH:mm:ss')} />
            )
        },

    ];
    return (
        <Table dataSource={listData} columns={columns} className="animate__animated animate__fadeIn" />
    )
}
